var mycharts = echarts.init(document.getElementById('charts'))
        option = {
        dataRange: {
            show:false,
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 5, end: 5, color: 'orange'},//当值为5时，区域背景
                {start: 10, end: 10, color: '#ff6300'},//当值为10时，区域背景
                {start: 15, end: 15, color: '#ccc'},//当值为15时，区域背景
            ],
        },
        series : [
            {
                name: '市场分布',
                type: 'map',
                mapType: 'china',
                //hoverable: false,
                roam: false,
                itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:false}}
                    },
                data:[],
            }
        ],
        animation:false
       
    };
    var ini_data=[];//初始化省份数组
    var provArr = ['湖北','上海'];//获取的省份，有可能是从后台获取
    //正则省份，将省与市的字眼去掉，框架不识别
    for(var i=0;i<provArr.length;i++){
        var str = provArr[i];
        var re = /省|市/g;  //全局匹配
        var str2 ={name:str.replace(re,''),value: 5};//拼接对象数组
        ini_data.push(str2);
    }
    option.series[0].data=ini_data;//将拼接好的数组赋给参数集合
    mycharts.setOption(option);//跟新图表
    //鼠标滑过事件
    var testStr=','+provArr.join(",")+","; 
    mycharts.on('hover', function (param){
        if(testStr.indexOf(","+param.name+",")!=-1){
            return false;
        }else{
            param.value=15;
            mycharts.setOption(option);
        }
    });
    
    //点击事件
    mycharts.on('click', function (params) {//点击事件
            select_province(params.name);
    });
    //初始化省颜色
    function ini_province(){
        var ini_len=option.series[0].data.length;
        for(var i=0;i<ini_len;i++){
            //初始化颜色
            option.series[0].data[i].value=5;
            mycharts.setOption(option);
        }
        
    }
    //选中省颜色
    function select_province(province_name){
        alert(province_name);
        var len=option.series[0].data.length;
        for(var i=0;i<len;i++){
            if(option.series[0].data[i].name==province_name){//如果匹配正确
                //先归零
                ini_province();
                //改变颜色
                option.series[0].data[i].value=10;
                mycharts.setOption(option);
            }
        }
    }

    var flag = false;//鼠标|手指是否按下的标记
    var cur = {//记录鼠标|手指按下时的坐标
        x:0,
        y:0
    }
    var nx,ny,dx,dy,x,y ;
    //按下时的函数
    function down(obj){
        flag = true;//确认鼠标|手指按下
        var touch ;
        if(event.touches){
            touch = event.touches[0];//多个鼠标|手指事件取第一个
        }else {
            touch = event;
        }
        cur.x = touch.clientX; //记录鼠标|手指当前的x坐标
        cur.y = touch.clientY;//记录鼠标|手指当前的y坐标
        dx = obj.offsetLeft;//记录div当时的左偏移量
        dy = obj.offsetTop;//记录div的上偏移量
    }
    function move(obj){
        if(flag){//如果是鼠标|手指按下则继续执行
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            nx = touch.clientX - cur.x;//记录在鼠标|手指x轴移动的数据
            ny = touch.clientY - cur.y;//记录在鼠标|手指y轴移动的数据
            x = dx+nx; //div在x轴的偏移量加上鼠标|手指在x轴移动的距离
            y = dy+ny; //div在y轴的偏移量加上鼠标|手指在y轴移动的距离
            obj.style.left = x+"px";
            obj.style.top = y +"px";
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove",function(){
                event.preventDefault();
            },false);
        }
    }
    //鼠标|手指释放时候的函数
    function end(){
        flag = false; //鼠标|手指释放
    }
    var div2 = document.getElementById("div2");
    div2.addEventListener("mousedown",function(){
        down(this);
    },false);
    div2.addEventListener("touchstart",function(){
        down(this);
    },false)
    div2.addEventListener("mousemove",function(){
        move(this);
    },false);
    div2.addEventListener("touchmove",function(){
        move(this);
    },false)
    document.body.addEventListener("mouseup",function(){
        end(this);
    },false);
    div2.addEventListener("touchend",function(){
        end(this);
    },false);

    var div1 = document.getElementById("div1");
    div1.addEventListener("mousedown",function(){
        down(this);
    },false);
    div1.addEventListener("touchstart",function(){
        down(this);
    },false)
    div1.addEventListener("mousemove",function(){
        move(this);
    },false);
    div1.addEventListener("touchmove",function(){
        move(this);
    },false)
    document.body.addEventListener("mouseup",function(){
        end(this);
    },false);
    div1.addEventListener("touchend",function(){
        end(this);
    },false);